<!--
 * @Date:  2024-05-25 14:05:59
 * @LastEditors: LDH 574427343@qq.com
 * @LastEditTime: 2023-05-24 15:20:53
 * @FilePath: /flow-designer/src/components/drawer/copyerDrawer.vue
-->
<template>
  <el-drawer :append-to-body="true" title="表决人设置" v-model="visible" class="set_copyer" :show-close="false" :size="550"
             :before-close="saveCopyer">
    <div class="copyer_content">
      <div class="copyer-title">{{ displayName }}</div>
      <el-radio-group v-model="copyerConfig.approvalUserType" class="clear" @change="changeType">
        <el-radio class="radio-item" v-for="({ value, label }) in approvalUserTypes" :key="value" :value="value">{{ label
          }}</el-radio>
      </el-radio-group>
      <div class="copyer_block input" v-if="['1','4'].includes(copyerConfig.approvalUserType)">
        <p v-if="copyerConfig.approvalUserType==='1'">指定成员</p>
        <p v-if="copyerConfig.approvalUserType==='4'">指定部门负责人</p>
        <el-form-item>
          <el-tree-select no-data-text="暂无数据" placeholder="请选择"  v-model="copyerConfig.nodeApproveList"
                          :data="store.userList" :multiple="true" :render-after-expand="false"
                          show-checkbox check-strictly check-on-click-node />
        </el-form-item>
      </div>
      <div class="copyer_block input" v-if="copyerConfig.approvalUserType === '6'">
        <p>指定标签</p>
        <el-form-item>
          <el-select  no-data-text="暂无数据" multiple filterable v-model="copyerConfig.nodeApproveList" placeholder="请选择">
            <el-option
                v-for="item in store.tagList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="copyer_block" >
        <span style="margin-right: 10px;">表决通过比例</span><el-input-number max="100" min="1" step="5" v-model="copyerConfig.votePassProportion"></el-input-number>
        <p></p>
        <span style="margin-right: 10px;">是否允许一票否决</span>
        <el-radio-group v-model="copyerConfig.allowVeto" class="clear">
          <el-radio :value="1">是</el-radio>
          <br />
          <el-radio :value="2">否</el-radio>
        </el-radio-group>
        <el-form-item v-if="copyerConfig.allowVeto === 1">
          <el-tree-select no-data-text="暂无数据" placeholder="请选择"  v-model="copyerConfig.vetoUsersList"
                          :data="store.userList" :multiple="true" :render-after-expand="false"
                          show-checkbox check-strictly check-on-click-node />
        </el-form-item>
      </div>
    </div>
    <div class="demo-drawer__footer clear">
      <el-button type="primary" @click="saveCopyer">确 定</el-button>
      <el-button @click="closeDrawer">取 消</el-button>
    </div>
<!--    <selectUser v-model:visible="copyerVisible" :data="checkedList" @change="sureCopyer" />-->
  </el-drawer>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { approvalUserTypes} from '@/utils/const'
import { useStore } from '@/stores/index'
import $func from '@/utils/index'
import {ElMessage} from "element-plus";


let props = defineProps({
  processData:{
    type: Object,
    default: () => ({}),
  }
});
let copyerConfig = ref({})
let ccFlag = ref([])
let copyerVisible = ref(false)
let checkedList = ref([])
let store = useStore()
let { setCopyerConfig, setCopyer } = store
let copyerDrawer = computed(()=> store.copyerDrawer)
let copyerConfig1 = computed(()=> store.copyerConfig1)
let visible = computed({
  get() {
    return copyerDrawer.value
  },
  set() {
    closeDrawer()
  }
})
const changeType = (val) => {
  copyerConfig.value.nodeApproveList = [];
}
console.log('333',copyerConfig)
const displayName = computed(() => {
  let approvalUserType =copyerConfig.value.approvalUserType
  if (approvalUserType){
    let o = approvalUserTypes.find(item=>item.value === approvalUserType)
    return o.label
  }
  return '请选择'
})
watch(copyerConfig1, (val) => {
  copyerConfig.value = val.value;
})

const addCopyer = () => {
  copyerVisible.value = true;
  checkedList.value = copyerConfig.value.nodeApproveList
}
const sureCopyer = (data) => {
  copyerConfig.value.nodeApproveList = data;
  copyerVisible.value = false;
}
const saveCopyer = () => {
  if (copyerConfig.value.allowVeto===1 && !copyerConfig.value.vetoUsersList.length){
    alert('请选择一票否决人')
    return
  }
  let s =$func.copyerStr(copyerConfig.value);
  copyerConfig.value.error =  s === "请选择"
  setCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id
  })
  closeDrawer();
}
const closeDrawer = () => {
  setCopyer(false)
}
</script>
<style lang="css" scoped>
.copyer_block{
  color: black;
  font-weight: 400;
  font-size: 14px;
  margin-top: 5px;
  .clear{
    width: 50%;
  }
  p{
    margin-bottom: 5px;
  }
  &.input{
    margin: 20px 0;
  }
}
.copyer-title{
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding:5px 2px;
  color: black;
}
.copyer_content {
  height: calc(100% - 75px);
}
.el-checkbox {
  margin-bottom: 20px;
}
.el-button {
  margin-bottom: 20px;
}
.selected_list {
  margin-bottom: 20px;
  line-height: 30px;
}

.selected_list span {
  margin-right: 10px;
  padding: 3px 6px 3px 9px;
  line-height: 12px;
  white-space: nowrap;
  border-radius: 5px;
  border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
  margin-left: 5px;
  width: 7px;
  height: 7px;
  cursor: pointer;
}
</style>
